<template>
  <div class="p-main">
    <div id="main"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { getJcxmLbByMarketATy } from "@/util/home.js";

export default {
  data() {
    return {
      myChart: null,
      option: {},
    };
  },
  created() {},
  async mounted() {
    let chartDom = document.getElementById("main");
    this.myChart = echarts.init(chartDom);

    let colorArr = [
      "rgba(42, 232, 130, 1)",
      "rgba(255, 226, 0, 1)",
      "rgba(2, 119, 255, 1)",
      "rgba(255, 173, 217, 1)",
      "rgba(178, 111, 1, 1)",
      "rgba(135, 99, 233, 1)",
      "rgba(38, 98, 89, 1)",
    ];
    let data = [];
    await getJcxmLbByMarketATy().then((res) => {
      if (res.data.data.length > 0) {
        res.data.data.forEach((item) => {
          data.push({
            name: item.name,
            value: item.bfb,
          });
        });
      }
    });

    let arrName = getArrayValue(data, "name");
    let arrValue = getArrayValue(data, "value");
    let sumValue = eval(arrValue.join("+"));
    let objData = array2obj(data, "name");
    let optionData = getData(data);
    function getArrayValue(array, key) {
      var key = key || "value";
      var res = [];
      if (array) {
        array.forEach(function (t) {
          res.push(t[key]);
        });
      }
      return res;
    }

    function array2obj(array, key) {
      var resObj = {};
      for (var i = 0; i < array.length; i++) {
        resObj[array[i][key]] = array[i];
      }
      return resObj;
    }

    function getData(data) {
      var res = {
        series: [],
        yAxis: [],
      };
      for (let i = 0; i < data.length; i++) {
        res.series.push({
          name: "",
          left: "25%",
          top: "-30%",
          type: "pie",
          clockWise: false, //顺时加载
          hoverAnimation: false, //鼠标移入变大
          radius: [65 - i * 10 + "%", 62 - i * 10 + "%"],
          center: ["30%", "55%"],
          label: {
            show: false,
          },
          itemStyle: {
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            borderWidth: 5,
          },
          data: [
            {
              value: data[i].value > 80 ? data[i].value - 25 : data[i].value,
              name: data[i].name,
            },
            {
              value: 125 - data[i].value,
              name: "",
              itemStyle: {
                color: "rgba(0,0,0,0)",
                borderWidth: 0,
              },
              tooltip: {
                show: false,
              },
              hoverAnimation: false,
            },
          ],
        });
        res.series.push({
          name: "",
          left: "25%",
          top: "-30%",
          type: "pie",
          silent: true,
          z: 1,
          clockWise: false, //顺时加载
          hoverAnimation: false, //鼠标移入变大
          radius: [65 - i * 10 + "%", 62 - i * 10 + "%"],
          center: ["30%", "55%"],
          label: {
            show: false,
          },
          itemStyle: {
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            borderWidth: 5,
          },
          data: [
            {
              value: 7.5,
              itemStyle: {
                color: "rgba(25,46,84, .7)",
                borderWidth: 0,
              },
              tooltip: {
                show: false,
              },
              hoverAnimation: false,
            },
            {
              value: 2.5,
              name: "",
              itemStyle: {
                color: "rgba(0,0,0,0)",
                borderWidth: 0,
              },
              tooltip: {
                show: false,
              },
              hoverAnimation: false,
            },
          ],
        });
      }
      return res;
    }

    let option = {
      title: {
        text: "项目检测类别",
        textStyle: {
          color: "#fff",
          fontSize: 14,
          // fontWeight:'none'
        },
        top: "8",
        left: "10",
      },
      legend: {
        show: true,
        left: "center",
        bottom: 10,
        data: arrName,
        itemWidth: 8,
        itemHeight: 8,
        width: 250,
        padding: [0, 5],
        itemGap: 5,
        formatter: function (name) {
          return "{title|" + name + "}{value|" + objData[name].value + "%}";
        },
        textStyle: {
          rich: {
            title: {
              fontSize: 10,
              width: 55,
              lineHeight: 10,
              color: "#fff",
            },
            value: {
              fontSize: 10,
              width: 45,
              lineHeight: 10,
              color: "#fff",
            },
          },
        },
      },
      // tooltip: {
      //   show: true,
      //   trigger: "item",
      //   formatter: "{a}<br>{b}:{c}({d}%)",
      // },
      // color: colorArr,
      yAxis: [
        {
          type: "category",
          inverse: true,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            inside: true,
            textStyle: {
              color: "#000",
              fontSize: 10,
            },
            show: true,
          },
          data: optionData.yAxis,
        },
      ],
      xAxis: [
        {
          show: false,
        },
      ],
      series: optionData.series,
    };

    this.myChart.setOption(option);
    window.addEventListener("resize", () => {
      this.myChart.resize();
    });
  },
};
</script>

<style lang="less" scoped>
.p-main {
  width: 100%;
  height: 100%;
  position: relative;

  .p-title {
    position: absolute;
    top: 15px;
    left: 23px;
    font-size: 14px;
    color: #fff;
  }
}

#main {
  width: 100%;
  height: 100%;
}
</style>
